<!--
 * @Description: 登录日志
 * @Author: qingyang
 * @Date: 2023-06-26 13:48:59
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-07 18:35:01
-->
<template>
  <div class="log-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #operatorSlot="{ scope }">
        <CTableColumn :main-text="scope.row.operator" :sub-text="scope.row.content"></CTableColumn>
      </template>
      <template #operationResultSlot="{ scope }">
        <el-tag :type="scope.row.operationResult == '成功' ? 'success' : 'danger'">
          {{ scope.row.operationResult }}</el-tag
        >
        <el-tooltip :content="scope.row.cause" v-if="scope.row.cause">
          <CIcon type="c-xian-jinggao" class="g-ml5 jinggao-icon-style"></CIcon>
        </el-tooltip>
        <!-- <CTableColumn
          :main-text="scope.row.operationResult"
          :sub-text="scope.row.cause && `失败原因：${scope.row.cause}`"
          subTextColor="#ff6045"
          subTextHideIfEmpty
        ></CTableColumn> -->
      </template>
    </CPageTable>
  </div>
</template>
<script lang="ts">
export default {
  name: 'LoginLog'
};
</script>
<script lang="ts" setup>
import { reactive } from 'vue';
import { useLogList } from './useLogList';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn } from '@/components/CTable';

const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useLogList();
const options = reactive<CPageTableProps>({
  title: '登录日志',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage] = useCPageTable(options);
</script>

<style lang="scss" scoped>
.log-list-container {
  min-height: 80%;
}
.error-msg {
  color: #ff6045;
}

.jinggao-icon-style {
  color: #96a7b3;
  &:hover {
    color: #435970;
  }
}
</style>
